<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<title>个人首页</title>
	<meta name="xhx" content="徐海翔的个人首页">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<!-- <link rel="shortcut icon" href="images/icon-logo.png" /> -->
	<link rel="stylesheet" href="css/corner.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/font.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="shortcut icon" href="xu.ico" type="image/x-icon">
	<style>
		.pace-running {
			overflow: hidden;
		}

		.pace-running::before {
			width: 100%;
			height: 100%;
			display: block;
			content: "";
			background: #eee;
		}
	</style>
</head>

<body>
	<div class="zhengjianzhao"></div>
	<div class="head">
		<a href="#" class="hed-box">
			<img src="images/zhengjianzhao.jpg" class="tx" title="点我查看">
			<!-- <img src="images/logo.png" class="logo" alt=""> -->
			<div class="box-txt">幸会，我是徐海翔</div>
		</a>
		<p class="head-title">幸会，我是徐海翔~</p>
		<nav>
			<div class="nav">
				<div class="navInner">
					<div class="navBtn">
						<span></span><span></span><span></span>
					</div>
				</div>
				<p class="tiShi">导航</p>
			</div>
			<div class="navBox">
				<div class="navDv">
					<span class="active"><a href="javascript:;">首页</a></span>
					<span><a href="javascript:;">关于我</a></span>
					<span><a href="javascript:;">技能掌握</a></span>
					<span><a href="javascript:;">我的经历</a></span>
					<span><a href="javascript:;">我的作品</a></span>
					<span><a href="javascript:;">联系我</a></span>
				</div>
			</div>
		</nav>
	</div>
	<div class="swiper-body swiper-container swiper-no-swiping">
		<div class="swiper-wrapper">
			<header class="swiper-slide Zinn">
				<div class="container-fluid">
					<div class="banner">
						<div class="banner-inner">
							<iframe src="unit/wow slider.html"
								style="width:100%;height:100%;max-width:100%;overflow:hidden;border:none;display:block;"
								marginheight="0" marginwidth="0"></iframe>
							<div class="Mask"></div>
						</div>
						<div class="banner-txt">
							<div class="banTxt" data-offset="5">
								<h1 class="center__text glitch center" data-text="Hello, I'm xuhaixiang">Hello, I'm
									xuhaixiang
								</h1>
								<p>我是徐海翔</p>
								<p>WEB前端开发工程师</p>
								<p class="youX">
									<a href="javascript:;" target="z">Email:3107751236@qq.com</a>
									<a href="javascript:;" target="z">Tel:15082676675</a>
								</p>
							</div>
						</div>
					</div>

				</div>
			</header>
			<div class="swiper-slide aboutMe Zinn">
				<div class="Mask"></div>
				<div class="Z-introduce-me">
					<div class="swiper-demo"></div>
					<div class="meImg">
						<img src="images/meimg.jpg" alt="">
					</div>
					<div class="meTxt">
						<h2>关于我</h2>
						<h3>- 您好，我是徐海翔</h3>
						<p>WEB前端工程师。</p>
						<h3>- 关于我</h3>
						<p>坐标南昌。目前就读于华东交通大学，信息工程学院信息工程专业，应聘前端工程师，希望从事网站开发与制作</p>
						<p>喜欢参与团队工作与集体活动。重视自身素质培养。</p>
						<h3>- 我能效劳</h3>
						<p>HTML,CSS，javascript,以及移动端流式布局，rem布局，flex布局三大布局模式;<br>
							掌握了node，mangodb，express，ajax，等前后端交互技术;<br>
							使用bootstrap，vue,react等框架书写前端功能，让页面更充实丰富。掌握了webpack使用。
						</p>

					</div>
				</div>
			</div>
			<div class="swiper-slide Jis-mastery Zinn">
				<div class="Mask"></div>
				<div class="Z-mastery">
					<h2>技能<span>掌握</span></h2>
					<div class="btns">
						<button class="Yes">HTML</button>
						<button class="Yes">CSS</button>
						<button class="Yes">JavaScript</button>
						<button class="Yes">BootStrap</button>
						<button class="Yes">AJAX</button>
						<button class="Yes">Vue.js</button>
						<button>react</button>
						<button>express</button>
						<button>Photoshop</button>
					</div>
					<div class="box">
						<div class="complete Yes one">
							<p>HTML</p>
							<div class="comp-inner html"></div>
						</div>
						<div class="complete Yes two">
							<p>CSS</p>
							<div class="comp-inner css"></div>
						</div>

						<div class="complete Yes three">
							<p>JavaScript</p>
							<div class="comp-inner js"></div>
						</div>
						<div class="complete Yes four">
							<p>bootstrpe</p>
							<div class="comp-inner bs"></div>
						</div>

						<div class="complete Yes five">
							<p>AJAX</p>
							<div class="comp-inner ajax"></div>
						</div>
						<!-- 
						<div class="complete Yes six">
							<p>Vue</p>
							<div class="comp-inner six"></div>
						</div> -->

						<div class="complete Yes one">
							<p>Vue.js</p>
							<div class="comp-inner Vue"></div>
						</div>
						<div class="complete two">
							<p>react</p>
							<div class="comp-inner react"></div>
						</div>
						<div class="complete three">
							<p>Photoshop</p>
							<div class="comp-inner photo"></div>
						</div>
						<div class="complete four">
							<p>Git</p>
							<div class="comp-inner git"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-slide Me-process Zinn">
				<div class="Mask"></div>
				<div class="Z-process">
					<div class="title">
						<h3>我的成长史</h3>
						<div class="inner">
							<div class="box">
								<div class="txt">
									<i>2020</i><span>YEAR</span>
								</div>
								<div class="clock"></div>
							</div>
							<ul class="coud">
								<li class="active">2017</li>
								<li class="active">2018</li>
								<li class="active">2019</li>
								<li class="active">2020</li>
							</ul>
						</div>
					</div>
					<ul class="Z-date">
						<li class="active">
							<span class="year">2017年</span>
							<span class="md">09月</span>
							<i></i>
							<b></b>
						</li>
						<li class="active">
							<span class="year">2018年</span>
							<span class="md">9月</span>
							<i></i>
							<b></b>
						</li>
						<li class="active">
							<span class="year">2019</span>
							<span class="md">9月</span>
							<i></i>
							<b></b>
						</li>

					</ul>
					<div class="Z-work">
						<ul>
							<li class="active">
								<h3 class="title">大一</h3>
								<p class="txt">
									<span>
									</span> <br />成为学生会新媒体干事，在此期间学习了ps的简单使用，可以对psd文件快速切图 </p>
							</li>
							<li class="active">
								<h3 class="title">大二</h3>
								<p class="txt">
									<span>
									</span><br /> 当选为班级组宣委员</p>
							</li>
							<li class="active">
								<h3 class="title">大三</h3>
								<p class="txt">
									<span>
									</span> <br /> 开始自学前端知识，熟练的掌握了html5，css3，js，前后端交互，以及vue框架熟练使用</p>
							</li>
						</ul>
					</div>

				</div>
			</div>
			<div class="swiper-slide My-works Zinn">
				<div class="Mask"></div>
				<div class="Z-works">
					<h2 class="title">作品<span>赏析</span></h2>
					<div class="left">
						<div class="border"></div>
						<div class="wrapper">
							<div class="carousel">
								<a href="http://xudingtian.gitee.io/jianli" target="z">
									<i class="txtIcon"></i>
									<img src="images/me.png" />
								</a>
								<a href="http://xudingtian.gitee.io/shopping" target="z">
									<i class="txtIcon"></i>
									<img src="images/pinyougou.png" />
								</a>
								<a href="http://xudingtian.gitee.io/studying" target="z">
									<i class="txtIcon"></i>
									<img src="images/studying.png" />
								</a>
							</div>
						</div>
						<div class="pager"></div>
					</div>
					<div class="right">
						<div class="border"></div>
						<div class="wrapper">
							<div class="carousel">
								<a href="http://175.24.118.114:8080" target="z">
									<i class="txtIcon"></i>
									<img src="images/vue.png" />
								</a>
								<a href="http://xudingtian.gitee.io/alibaixiu" target="z">
									<i class="txtIcon"></i>
									<img src="images/alibaixiu.png" />
								</a>
								<a href="http://xudingtian.gitee.io/xiechengwnag" target="z">
									<i class="txtIcon"></i>
									<img src="images/xiechengwang.png" />
								</a>
							</div>
						</div>
						<div class="pager"></div>
					</div>
					<div class="swiper-inner swiper-container">
						<div class="swiper-wrapper">
							<a href="#" class="swiper-slide" style="background-image:url(images/me.png)"></a>
							<a href="#" class="swiper-slide" style="background-image:url(images/pinyougou.png)"></a>
							<a href="#" class="swiper-slide" style="background-image:url(images/studying.png)"></a>

							<a href="#" class="swiper-slide" style="background-image:url(images/vue.png)"></a>
							<a href="#" class="swiper-slide" style="background-image:url(images/alibaixiu.png)"></a>
							<a href="#" class="swiper-slide" style="background-image:url(images/xiechengwang.png)"></a>
						</div>
						<div class="swiper-pagination"></div>
					</div>
				</div>
			</div>
			<div class="swiper-slide Me-contact Zinn ">
				<div class="Mask"></div>
				<div class="Z-contact">
					<div class="box-top"></div>
					<div class="box-bottom"></div>
					<h2>CONTACT&nbsp;&nbsp;<span>ME</span></h2>
					<div class="lian-bottom">
						<p class="lian-title">
							<i>灵感</i>
							<i>代码</i>
							<i>梦想</i>
							<i>未来</i>
						</p>
						<p class="lian-txt">
							写代码是一件快乐的事情<br />
							兴趣指引我前进<br>
							期待与您共事！<br><br>
							MY TEL: 15082676675<br>
							MY EMAIL: 3107751236@qq.com<br>
						</p>

						<div class="lian-lo">
							<a href="https://gitee.com/xudingtian" target="z"
								class="icon iconfont">&#xe501;<span>码云</span></a>
							<a href="https://github.com/xhxazw" target="z"
								class="icon iconfont">&#xe670;<span>Github</span></a>
							<a href="https://space.bilibili.com/132784661" target="z"
								class="icon iconfont">&#xe662;<span>B站</span></a>
							<a href=http://wpa.qq.com/msgrd?v=3&uin=3107751236&site=qq&menu=yes"
								class="icon iconfont img">&#xe658;
								<span>点击在线交谈<img src="images/qq.png" alt=""></span>
							</a>
							<a href="#" class="icon iconfont img">&#xe7bd;
								<span><img src="images/wx1.png" alt=""></span>
							</a>
						</div>
					</div>
				</div>
				<p class="ban">@ 2020 xuhaixiang</p>
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>


	<div class="Z-head">

	</div>




	<script data-pace-options='{ "ajax": false }' src='js/pace.js'></script>
	<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/script.js"></script>
	<script>
		var $banTxt = $('.banTxt');
		$banTxt.on('mouseover', function () {
			this.classList.add("yinying")
			// console.log(1);
			// console.log(this.classList);
		}).on("mouseout", function () {
			this.classList.remove("yinying")
			// console.log(2);
			// console.log(this.classList);
		});

	</script>
</body>

</html>